<script setup>

/**
 * @import pinia stores
 */

// pinia -> useHomePageStore
import { useHomePageStore } from '@/stores/index/homePage.js'

/**
 * @function recommendUserAvatarClick 推荐部分用户头像被点击
 * @function recommendPostLikeClick 推荐部分帖子被点赞
 * @function recommendPostClick 推荐部分帖子被点击
 * @function recommendPostShareClick 推荐帖子分享图标被点击
 */
const { recommendUserAvatarClick, recommendPostLikeClick, recommendPostClick, recommendPostShareClick } = useHomePageStore()

/**
 * props
 */
const props = defineProps({
    item: {
        type: Object,
        default: {}
    }
})

/**
 * 推荐部分用户头像被点击事件
 * @param {Number} userId 用户id
 * @return {void}
 */
const recommendUserAvatarClickEvent = (userId) => {

    // 参数有效性校验
    if (userId === undefined) {
        console.error('userId is undefined')
        return
    }

    // 参数类型校验
    if (typeof userId !== 'number') {
        console.error('userId must be a number')
        return
    }

    recommendUserAvatarClick(userId)
}

/**
 * 推荐部分帖子被点赞事件
 * @param {Number} postId 帖子id
 * @param {Number} userId 用户id
 * @return {void}
 */
const recommendPostLikeClickEvent = (postId, userId) => {

    // 参数有效性校验
    if (postId === undefined) {
        console.error('postId is undefined')
        return
    }

    if (userId === undefined) {
        console.error('userId is undefined')
        return
    }

    // 参数类型校验
    if (typeof postId !== 'number') {
        console.error('postId must be a number')
        return
    }

    if (typeof userId !== 'number') {
        console.error('userId must be a number')
        return
    }

    recommendPostLikeClick(postId, userId)
}

/**
 * 推荐部分帖子被点击事件
 * @param {Number} postId 帖子id
 * @return {void}
 */
const recommendPostClickEvent = (postId) => {

    // 参数有效性校验
    if (postId === undefined) {
        console.error('postId is undefined')
        return
    }

    // 参数类型校验
    if (typeof postId !== 'number') {
        console.error('postId must be a number')
        return
    }

    recommendPostClick(postId)
}

/**
 * 推荐帖子分享图标被点击
 * @param {Number} postId 帖子id
 * @param {Number} userId 用户id
 * @return {void} 
 */
const recommendPostShareClickEvent = (postId, userId) => {

    // 参数有效性校验
    if (postId === undefined) {
        console.error('postId is undefined')
        return
    }

    if (userId === undefined) {
        console.error('userId is undefined')
        return
    }

    // 参数类型校验
    if (typeof postId !== 'number') {
        console.error('postId must be a number')
        return
    }

    if (typeof userId !== 'number') {
        console.error('userId must be a number')
        return
    }

    recommendPostShareClick(postId, userId)
}

</script>

<template>
    <div class="recommended-post" @click.stop="recommendPostClickEvent(item.id)">
        <div class="post-header">
            <div>
                <image class="avatar-class" :src="item.avatar"
                    @click.stop="recommendUserAvatarClickEvent(item.userId)" mode="aspectFill" />
            </div>
            <div>
                <div>{{ item.nickName }}</div>
                <div class="post-time">{{ item.time }}</div>
            </div>
        </div>
        <div>
            <image class="post-image" :src="item.imageUrl" mode="aspectFill" />
        </div>
        <div class="post-content">{{ item.content }}</div>
        <div class="post-footer">
            <div class="post-footer-left">
                <div class="post-footer-left-item" @click.stop="recommendPostLikeClickEvent(item.id, item.userId)" >
                    <div>
                        <image src="@/static/icons/like.svg"
                            class="icon-class"
                            mode="scaleToFill" />
                    </div>
                    <div class="post-footer-left-item-text">{{ item.likeCount }}</div>
                </div>
                <div class="post-footer-left-item" @click.stop="recommendPostShareClickEvent(item.id, item.userId)">
                    <div>
                        <image src="@/static/icons/retransmission.svg"  class="icon-class" mode="aspectFill" />
                    </div>
                    <div class="post-footer-left-item-text">
                        {{ item.shareCount }}
                    </div>
                </div>
            </div>
            <div>
                <image class="icon-class" src="@/static/icons/more.svg" mode="aspectFill" />
            </div>
        </div>
    </div>
</template>

<style scoped>
.post-footer-left-item-text {
    font-size: 28rpx;
    color: #f3c694;
}

.post-footer-left-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 110rpx;
}

.post-footer-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 250rpx;
}

.post-footer {
    display: flex;
    justify-content: space-between;
}

.post-content {
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    line-height: 60rpx;
}

.post-image {
    margin-top: 10rpx;
    width: 650rpx;
    border-radius: 10rpx;
}

.post-time {
    font-size: 20rpx;
}

.post-header {
    display: flex;
    width: 200rpx;
    justify-content: space-between;
    align-items: center;
}

.recommended-post {
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
}

.avatar-class {
    width: 80rpx;
    height: 80rpx;
}

.icon-class {
    width: 50rpx;
    height: 50rpx;
}
</style>